<script lang='ts' setup>
import { ref, watch } from 'vue';

const props = defineProps<{ modelValue: string }>()
const emits = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
const sqlStr = ref(props.modelValue)
watch(() => props.modelValue, (val: string) => {
  sqlStr.value = val

})
</script>
<template>
  <div v-html="props.modelValue" class="html-readonly-editor"></div>
</template>
<style scoped lang='scss'>
.html-readonly-editor {
  width: 100%;
  height: fit-content;
  max-height: 540px;
  overflow: auto;
  background-color: #1e1e1e;
  color: white;
  font-size: 15px;
  padding: 10px 30px;
  line-height: 22px;
  min-height: 200px;
  overflow-x: auto;
  white-space: nowrap;

  &::-webkit-scrollbar {
    width: 12px;
    /* 垂直滚动条宽度 */
    height: 12px;
    /* 水平滚动条高度 */
  }

  &::-webkit-scrollbar-track {
    background: #000000;
    border-radius: 1px;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 1px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}
</style>